<template>
  <div>
    <el-card style="margin: 20px 0px;">
      <!--组件通信：传递绑定事件   -->
      <CategorySelector ref="cs" @getCategoryId=getCategoryId :show="!isShowTable" />
    </el-card>

    <el-card>
      <div v-show="isShowTable">
        <!-- 表格数据收集之后  添加属性什么时候显示:disabled="!category3Id" 点击事件是触发列表什么时候展示-->
        <el-button type="primary" icon="el-icon-plus" style="margin-bottom: 20px" @click="addAttr"
          :disabled="!category3Id">添加属性</el-button>
        <!--表格属性   搭建静态页面   请求    收集表格需要展示的数据  -->
        <el-table border :data="attrList">
          <el-table-column label="序号" type="index" width="80" align="center"></el-table-column>
          <el-table-column label="属性名称" width="150" prop="attrName"></el-table-column>
          <el-table-column label="属性值列表">
            <template slot-scope="{row, $index}">
              <!--插槽 -->
              <el-tag style="margin: 0 2px" type="success" v-for="(attrValue, index) in row.attrValueList"
                :key="attrValue.id">
                {{ attrValue.valueName }}</el-tag>
            </template>
          </el-table-column>
          <el-table-column label="操作" width="150">
            <template slot-scope="{row, $index}">
              <el-button type="warning" size="mini" icon="el-icon-edit" @click="updateAttr(row)">
              </el-button>
              <el-button type="danger" size="mini" @click="" icon="el-icon-delete"></el-button>
            </template>
          </el-table-column>
        </el-table>
      </div>

      <!--添加或修改属性值之后跳到另一个界面-->
      <div v-show="!isShowTable">
        <el-form inline :model="attrInfo">
          <el-form-item label="属性名">
            <el-input type="text" v-model="attrInfo.attrName" placeholder="请输入属性名"></el-input>
          </el-form-item>
        </el-form>

        <el-button type="primary" icon="el-icon-plus" :disabled="!attrInfo.attrName" @click="addAttrValue">添加属性值
        </el-button>
        <el-button @click="isShowTable = true">取消</el-button>
        <!-- -->
        <el-table border style="margin: 20px 0" :data="attrInfo.attrValueList">
          <el-table-column label="序号" type="index" width="80" align="center"></el-table-column>
          <el-table-column label="属性值名称">
            <template slot-scope="{row, $index}">
              <el-input :ref="$index" v-if="row.flag" v-model="row.valueName" size="mini" placeholder="请输入属性值名称"
                @blur="toLook(row)" @keyup.native.enter="toLook(row)"></el-input>
              <span v-else @click="toEdit(row, $index)" style="display: inline-block; width: 100%">
                {{ row.valueName }}
              </span>
            </template>
          </el-table-column>
          <el-table-column label="操作">
            <template slot-scope="{row, $index}">
              <el-popconfirm :title="`确定删除${row.valueName}?`" @onConfirm="deleteAttrValue">
                <el-button type="danger" size="mini" slot="reference" icon="el-icon-delete"></el-button>
              </el-popconfirm>
            </template>
          </el-table-column>
        </el-table>

        <el-button type="primary" @click="addOrUpdateAttr" :disabled="attrInfo.attrValueList.length < 1">保存
        </el-button>
        <el-button @click="isShowTable = true">取消</el-button>
      </div>
    </el-card>
  </div>
</template>

<script>
import cloneDeep from 'lodash/cloneDeep' // 只引入要使用的工具函数
export default {
  name: 'Attr',
  data() {
    return {
      category1Id: '',  // 一级分类ID
      category2Id: '',  // 二级分类ID
      category3Id: '',  // 三级分类ID
      attrList: [], // 所有属性的列表
      isShowTable: true, // 是否显示属性列表页面   true: 列表页面, false: 添加或更新页面  isShowTable   点击事件isShowTable=false
      attrInfo: { // 收集新增或者修改的平台属性对象attrInfo
        attrName: '', // 属性名
        attrValueList: [], //属性值的列表
        categoryId: '', // 3级的分类ID
        categoryLevel: 3, // 只能是3级
      }
    }
  },

  mounted() {
    // this.category1Id = 2
    // this.category2Id = 13
    // this.category3Id = 61
    // this.getAttrs()
  },

  watch: {
    // 当isShowList发生改变时执行处理: 更新cs组件的disabled状态数据
    isShowList(value) {
      this.$refs.cs.disabled = !value
    }
  },

  methods: {

    //删除指定的属性
    deleteAttr(id) {
      // 请求删除
      this.$API.attr.remove(id).then(result => {
        // 重新获取列表显示
        this.getAttrs()
      }).catch(error => {
        this.$message.error('删除属性失败')
      })
    },

    // 保存(添加/更新)属性
    async addOrUpdateAttr() {
      // 准备参数数据
      this.attrInfo.attrValueList = this.attrInfo.attrValueList.filter(item=>{
        if (value.valueName !== '') {
          delete item.flag
          return true
        }
      })
      try {
        await this.$API.attr.reqAddOrUpdateAttr(this.attrInfo);
        this.isShowTable = true;
        this.$message({type:'success',message:'保存成功'});
        this,this.getAttrList();
      // 在提交请求前, 需要对收集数据进行整理操作
      /* 
      属性值名称没有指定, 请求保存的是"" ==> 将属性值名称为""的属性值对象从数组中过滤掉
      一个属性值都没有指定, 也提交了请求  ==> 不能提交请求
      请求携带了没有必要的参数数据: edit  ==> 删除此属性
      */
      }catch(error){
        this.$message('保存失败')
      }
    },
 

    







    //将指定属性值对象的界面变为编辑模式
    toLook(row) {
      // 如果value就已经有edit属性了, 直接指为true
      if (row.valueName.trim() == '') {
        this.$message('请你输入一个正常的属性值');
        return
      }
      this.attrInfo.attrValueList.some(item => {
        if (row !== item) {
          return row.valueName == item.valueName;
        }
      });
      if (isRepat) return;
      row.flag = false

    },



    //将指定属性值对象的界面变为查看模式,点击span
    toEdit(row, $index) {
      row.flag = true;
      this.$nextTick(() => {
        this.$refs[index].focus();
      })
    },

    //显示添加属性的界面
    addAttr() {
      // 显示添加的界面
      this.isShowTable = false;
      // 重置attr对象 
      this.attrInfo = {
        attrName: "",
        attrValueList: [],
        categoryId: this.category3Id,
        categoryLevel: 3,
      }

    },

    //显示修改属性的界面
    updateAttr(row) {
      // 保存要修改的属性对象
      // this.attr = attr // 列表与修改界面引用了同一个属性对象  ==> 修改属性名不能取消
      // this.attr = {...attr} // 对attr进行了一个浅拷贝(克隆)  ==> 修改属性值名称不能取消
      this.attrInfo = cloneDeep(row); // 对attr进行了一个深拷贝(克隆) ==> OK 使用深拷贝解决嵌套问题
      // 显示更新的界面(attr中有数据)
      this.isShowTable = false;
      this.attrInfo.attrValueList.forEach(item => {
        this.$set(item, 'flag', false)
      })
    },


    //添加一个新的属性值
    addAttrValue() {
      this.attrInfo.attrValueList.push({
        attrId: this.attrInfo.id, // 如果是修改属性有值, 如果是添加属性就是undefined
        valueName: '',
        flag: true, // 添加的新属性值是编辑模式的
      })
      // 让最后一个属性值的input自动获得焦点 (必须等界面更新之后之能focus)
      this.$nextTick(() => {
        this.$refs[this.attrInfo.attrValueList.length - 1].focus()
      })
    },

    //3个级别分类发生改变时的监听回调，自定义事件
    getCategoryId({ categoryId, level }) {
      // console.log('handleCategoryChange', categoryId, level)
      if (level == 1) {
        this.category1Id = categoryId;
        // 重置2级和3级ID和属性列表;
        this.category2Id = '';
        this.category3Id = '';
        this.attrs = [];
      } else if (level == 2) {
        this.category2Id = categoryId
        // 重置3级ID和属性列表
        this.category3Id = ''
        this.attrs = [];
      } else {
        this.category3Id = categoryId
        // 异步请求获取属性列表显示
        this.getAttrList();
      }
    },

    //异步请求获取属性列表显示,第二个大卡片数据展示
    async getAttrList() {
      const { category1Id, category2Id, category3Id } = this;
      let result = await this.$API.attr.reqAttrList(category1Id, category2Id, category3Id);
      if (result.code == 200) {//判断数据显示
        this.attrList = result.data;
      };
    },


  }
}

</script>

<style scoped>
.edit-input {
  padding-right: 60px;
}

.save-btn {
  position: absolute;
  right: 15px;
  top: 10px;
}
</style>